<template>
  <div class="login-background">
    <div class="login-form">
      <a-form :model="form" :style="{ width: '500px' }" :layout="layout" @submit="handleSubmit">
        <a-form-item>
          <div class="login-title">
            <span>欢迎登陆GO 微博客系统</span>
          </div>
        </a-form-item>
        <a-form-item
          field="username"
          label="用户名："
          :rules="[{ required: true, message: 'username is required' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model="form.username" placeholder="please enter your username..." />
        </a-form-item>
        <a-form-item
          field="password"
          label="密码："
          :rules="[
            { required: true, message: 'password is required' },
            { minLength: 5, message: 'password must be greater than 5 characters' }
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input-password
            v-model="form.password"
            placeholder="please enter your password..."
            :defaultVisibility="false"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="isRead">
          <a-checkbox v-model="form.isRead"> I have read the manual </a-checkbox>
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit" size="large" style="width: 100%">登陆</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import { useRoute, useRouter } from 'vue-router'
import { state } from '@/stores/localstorage'
import { LOGIN } from '@/api/login'
const router = useRouter()
const route = useRoute()
const layout = ref('horizontal')
const form = reactive({
  username: state.value.username,
  password: '',
  isRead: false
})

// 提交处理
const handleSubmit = async (data) => {
  if (!data.errors) {
    // 执行用户密码判定
    // 需要对接API
    try {
      let resp = await LOGIN({ username: form.username, password: form.password })

      // 如果正确提示登陆成功
      Message.success({
        content: '登陆成功！',
        duration: 1000
      })
      // 如果正确跳转到后台页面
      // 保持一个全局状态，供全局使用，最好方式使用持久化
      // 浏览器用于持久化的手段：本地存储，会话存储，缓存存储，共享存储，cookie存储
      // 安装vueuse使用localStorage响应式对象：npm i @vueuse/core
      // 这是一个ref对象，使用state.value.isLogin 来进行操作
      state.value.isLogin = true // 设置状态为true
      // 默认去往页面路由
      let to = 'BackendBlogList'
      // 判断路由后面是否有参数？/login?to=TagList 有参数去对应路由
      // 通过useRoute 函数来获取当前页面的路由对象，Route对象
      if (route.query.to) {
        to = route.query.to
      }
      router.push({ name: to })
      state.value.isLogin = true // 设置状态为true
      state.value.username = resp.username
    } catch (error) {
      Message.error({
        content: `登陆失败: ${error}`,
        duration: 5000
      })
    }
  } else {
    Message.error({
      content: '登陆失败！',
      duration: 1600
    })
  }
}
</script>
<style scoped>
.login-background {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.login-form {
  display: flex;
  height: 50%;
  align-items: center;
  justify-content: center;
  background: #f7f8f8; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #acbb78, #f7f8f8); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #acbb78,
    #f7f8f8
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.login-title {
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 25px;
  color: #80571c;
}
</style>
